<script setup>
import LeftComponents from "@/components/leftComponents.vue";
import {onMounted, ref, watch} from "vue";
import Http from "@/http/http.js";
import {getImgUrl} from "@/until/tool.js";
import LeftTypeComponent from "@/views/webLayout/leftTypeComponent.vue";
import {useRouter} from "vue-router";
import ServiceBanner from "@/views/service/serviceBanner.vue";
const pageObj = ref({
  total: 0,
  current: 1,
  pageSize: 16,
  showTotal: true,
  showJumper: false,
  showPageSize: true,
  pageSizeOptions: [15, 30, 50, 80, 100],
})
const router = useRouter()
const typeData = ref([])
const listData = ref([])
const typeId = ref(0)
const typeName = ref("服务项目")
onMounted((async () => {
  await getTypeData()
  await getListData()
}))

const getParams = () => {
  if (Object.keys(router.currentRoute.value.query).length > 0) {
    typeId.value = Number(router.currentRoute.value.query.typeId);
    getTypeName(typeId.value)
  }
}

const getTypeName = (typeId) => {
  typeData.value.forEach((d) => {
    if (d["TypeId"] === typeId) {
      typeName.value = d["TypeName"];
    }
  })
}


const getTypeData = async () => {
  const res = await Http.serviceType()
  typeData.value = res.Data;
}
const getListData = async () => {
  let Obj = {current: pageObj.value.current - 1, pageSize: pageObj.value.pageSize}
  if (typeId.value > 0) {
    Obj['TypeId'] = typeId.value;
  }
  const res = await Http.service(Obj)
  listData.value = res.Data.Data;
  pageObj.value.total = res.Data["DataCount"]
  getParams()
}
function onChange(current) {
  pageObj.value.current = current;
  getListData()
}

watch(
    () => router.currentRoute.value.query,
    (value) => {
      if (value) {
        typeId.value = Number(value.typeId);
        getTypeName(Number(value.typeId))
        getListData()
      }
    },
    {
      deep: true
    }
);
</script>

<template>
  <service-banner/>
  <div class="wid flex justify-between">
    <div class="win_left">
      <div class="left_title">
        <div class="left_title_top"><b>服务项目</b> <span><icon-list color="blue"/></span></div>
        <div class="left_title_con">
          <left-type-component v-show="typeData.length>0" :type-data="typeData" type-router="service"/>
        </div>
      </div>
      <left-components/>
    </div>
    <div class="win_right">
      <div class="right_title">
        <span>{{ typeName }}</span>
      </div>
      <div class="con">
          <ul>
            <li v-for="item of listData"><a :href="`/serviceDetail/${item.ServiceId}`" :title="item.ServiceTitle"><img :src="getImgUrl(item.ServiceImg)" :alt="item.ServiceTitle">
              <div class="item_mask">
                <div class="item_link_icon ico"></div>
              </div>
              <span>{{ item.ServiceTitle }}</span></a></li>
          </ul>
      </div>
      <div class="w-1/1 flex justify-center m-b-30px">
        <a-pagination hideOnSinglePage v-model="pageObj.current" :pageSize="pageObj.pageSize" :total="pageObj.total" @change="onChange" show-less-items/>
      </div>
    </div>

  </div>
</template>

<style scoped lang="less">

</style>
